<template>
  <el-tooltip :placement="placement" v-if="overHidden">
    <!--    超出内容显示为省略号-->
    <div slot="content" v-html="showText"></div>
    <p class="content" :style="{'text-overflow':textOverflow }" ref="text">{{ text }}</p>
  </el-tooltip>
  <p v-else>{{ text }}</p>
</template>

<script>
import {splicingCharacters} from "@/util";

export default {
  props: {
    //是否开启tip显示
    overHidden: {
      type: Boolean,
      default: true,
    },
    //展示文本
    text: {
      type: String,
      default: ""
    },
    //显示在什么位置(默认上方)
    placement: {
      type: String,
      default: "top"
    },
    //换行字符长度
    lineBreakLength: {
      type: Number,
      default: 30
    },
    //超出字符显示(默认省略号)
    textOverflow: {
      type: String,
      default: "ellipsis"
    },
  },
  created() {
    this.getShowText(this.text, this.lineBreakLength);
  },
  data() {
    return {
      showText: "",//增加换行<br/>的展示文本
    }
  },
  methods: {
    getShowText(newVal, lineBreakLength) {
      this.showText = "";
      if (!newVal) {
        this.overHidden = false;
        return;
      }
      if (this.overHidden) {
        this.$nextTick(() => {
          //如果没有手动关闭显示tip组件，判断文字的长度是否超过文本框的显示
          let content = this.$refs.text
          if (content.offsetWidth > content.parentElement.offsetWidth - 20) {//减20是因为左右有内边距
            //超出表格内容,显示Tooltip组件
            this.$refs.text.classList.add("hideContent")
            this.showText = splicingCharacters(newVal, lineBreakLength, "<br/>");
          } else {
            //没超出
            this.overHidden = false;
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.content {
  white-space: nowrap; /*文本不进行换行*/
  width: 100%;
  display: inline;

}

.hideContent {
  overflow: hidden;
  display: block;
}


</style>
